<!--
* @author: Charles_XDXD
* @description: 我的收藏
-->
<template>
  <div style="padding: 24px; background-color: white">
    <h1 style="text-align: center">我的收藏</h1>

    <div
      style="
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
      "
    >
      <a-input-search
        v-model:value="searchQuery.title"
        placeholder="搜索收藏内容"
        enter-button
        @search="handleSearch"
        style="max-width: 300px"
      />
    </div>

    <div v-if="favouriteList.length > 0">
      <a-row :gutter="[16, 16]">
        <a-col
          :span="6"
          v-for="(item, index) in favouriteList"
          :key="index"
        >
          <a-card
            hoverable
            style="height: 100%"
          >
            <template #cover>
              <img
                alt="视频封面"
                :src="item.thumbnailUrl"
                style="width: 100%; height: 180px; object-fit: cover"
                @click="locateToVideoPage(item.videoId)"
              />
            </template>

            <a-card-meta>
              <template #title>
                <div
                  class="card-title"
                  :title="item.title"
                  >{{ item.title }}</div
                >
              </template>

              <template #description>
                <div class="card-author">
                  <span class="card-author-name">{{ item.nickname }}</span>
                </div>

                <div class="card-details">
                  <div class="stats-row">
                    <span><eye-outlined /> {{ formatNumber(item.viewCount) }}</span>
                    <span><message-outlined /> {{ item.commentCount }}</span>
                  </div>
                  <div class="time-row">
                    <span>发布于: {{ formatTime(item.publishTime) }}</span>
                    <span>收藏于: {{ formatTime(item.createTime) }}</span>
                  </div>
                </div>

                <div class="action-buttons">
                  <a-button
                    type="link"
                    danger
                    @click="handleCancel(item.videoId)"
                  >
                    <delete-outlined />
                    取消收藏
                  </a-button>
                </div>
              </template>
            </a-card-meta>
          </a-card>
        </a-col>
      </a-row>

      <Pagination
        style="margin-top: 20px"
        v-model:page="searchQuery.pageNo"
        v-model:limit="searchQuery.pageSize"
        :total="total"
        @pagination="loadData"
      />
    </div>
    <div v-else>
      <a-empty />
    </div>
  </div>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'
import { DeleteOutlined, EyeOutlined, MessageOutlined } from '@ant-design/icons-vue'
import type { CvVideoFavouriteRespVO, CvVideoFavouriteSearchReqVO } from '@/types/favourite'
import { cancelFavourite, getFavouritePage } from '@/api/favourite'
import { message, Modal } from 'ant-design-vue'

/**
 * 搜索条件
 */
const searchQuery = ref<CvVideoFavouriteSearchReqVO>({
  title: '',
  pageNo: 1,
  pageSize: 8
})

/**
 * 收藏列表数据
 */
const favouriteList = ref<CvVideoFavouriteRespVO[]>([])

/**
 * 总数
 */
const total = ref(0)

/**
 * 播放量格式化
 */
const formatNumber = (num: number) => {
  if (!num) {
    return 0
  }

  if (num >= 1000 && num < 10000) {
    return (num / 1000).toFixed(1) + 'K'
  } else if (num >= 10000) {
    return (num / 10000).toFixed(1) + 'W'
  } else {
    return num.toString()
  }
}

/**
 * 时间格式化
 */
const formatTime = (time: string) => {
  return dayjs(time).format('YYYY-MM-DD')
}

/**
 * 加载数据
 */
const loadData = async () => {
  const res = await getFavouritePage(searchQuery.value)
  favouriteList.value = res.list
  total.value = res.total
}

/**
 * 搜索处理
 */
const handleSearch = () => {
  searchQuery.value.pageNo = 1
  loadData()
}

/**
 * 取消收藏
 */
const handleCancel = async (videoId: number) => {
  Modal.confirm({
    title: '确定要取消收藏该视频吗？',
    content: '取消收藏后，视频将不再出现在您的收藏列表中',
    okText: '确定',
    cancelText: '取消',
    centered: true,
    onOk: async () => {
      await cancelFavourite(videoId)
      await loadData()
      message.success('取消收藏成功')
    }
  })
}

/**
 * 初始化加载
 */
onMounted(() => {
  loadData()
})

/**
 * 跳转到视频页面
 */
const locateToVideoPage = (videoId: number) => {
  videoId && window.open(`/video?videoId=${videoId}`)
}
</script>

<style scoped>
.card-title {
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-author {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.card-author-name {
  font-size: 14px;
  color: #666;
}

.stats-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}

.time-row {
  display: flex;
  flex-direction: column;
}

.time-row span {
  margin: 2px 0;
}

.action-buttons {
  margin-top: 12px;
  border-top: 1px solid #f0f0f0;
  padding-top: 12px;
  display: flex;
  justify-content: flex-end;
}

.ant-card {
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
</style>
